@import 'base';

// @rootSize:3.75vw;

@vw: 3.75vw;
@color: #fb7299;

// 头部 固定
header {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    // width: 100vw;
    height: (46 / @vw);
    background-color: #fff;
    border-bottom: 1px solid #eee;

    // top
    .top {
        display: flex;
        justify-content: space-between;
        align-items: center;

        height: (44 / @vw);
        padding-left: (18 / @vw);
        padding-right: (12 / @vw);

        .left {
            img {
                width: (26 / @vw);
            }
        }
        .middle {
            ul {
                display: flex;
                font-size: (15 / @vw);
                li {
                    margin: (10 / @vw);
                    a {
                        color: #90959b;
                        &.current {
                            color: @color;
                        }
                    }
                }
            }
        }
        .right {
            button {
                font-size: (13 / @vw);
                background-color: #fb7299;
                color: #fff;
                width: (136 / @vw);
                height: (30 / @vw);
                border: 0;
                border-radius: (20 / @vw);
            }
        }
    }
}
// list
.list {
    margin-top: (46 / @vw);
    // height: (40 / @vw);

    .more {
        a {
            display: block;
            width: (40 / @vw);
            height: (40 / @vw);
            // background-color: pink;
            text-align: center;
            line-height: (40 / @vw);
            // font-size: (22 / @vw);
            color: #ccc;
            .iconfont {
                font-size: (22 / @vw);
            }
        }
    }

    .tab {
        ul {
            display: flex;
            flex-wrap: wrap;
            padding: (9 / @vw) (16 / @vw);
            border-bottom: 1px solid #eee;
            li {
                padding: 0 (10 / @vw);
                a {
                    display: block;
                    color: #6c727e;
                    height: (28 / @vw);
                    line-height: (28 / @vw);
                    font-size: (12 / @vw);
                    &.current {
                        color: @color;
                    }
                }
            }
        }
    }
}

.nav {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #ccc;
    span {
        padding: 0.16667rem 0.83333rem;
        margin: 0.5rem 0;
    }
}
.none {
    display: none;
}
.nav-dis {
    ul {
        display: flex;
        li {
            padding: 0.16667rem 0.83333rem;
            margin: 0.5rem 0;
        }
    }
}

.nav-show {
    display: flex;
    justify-content: space-between;
    ul {
        display: flex;
        li {
            padding: 0.16667rem 0.83333rem;
            margin: 0.5rem 0;
        }
    }
    span {
        margin-top: 12px;
    }
}

// 视频
.video_content {
    padding: (35 / @vw) (5 / @vw) 0;

    .video_list {
        display: flex;
        // 弹性盒子换行
        flex-wrap: wrap;

        a {
            width: 33.33%;
            padding: (8 / @vw) (6 / @vw);
            // background-color: pink;
            font-size: (12 / @vw);

            .txt {
                margin-top: (5 / @vw);
            }
            .text {
                color: #999;
                font-size: (12 / @vw);
            }
        }
    }
}
